<template>
	<div class="page">
		<div class="leftbox">
			<!-- <v-carousel cycle class="carousel" height="400" hide-delimiter-background show-arrows-on-hover>
				<v-carousel-item v-for="(slide, i) in slides" :key="i">
					<v-sheet class="carousel" :color="colors[i]" height="100%">
						<v-row class="fill-height" align="center" justify="center">
							<div class="text-h2">
								{{ slide }} Slide
							</div>
						</v-row>
					</v-sheet>
				</v-carousel-item>
			</v-carousel> -->

			<v-card class="card" :key="i" v-for="(slide, i) in [1,2,3]">
				<v-img
					src="https://i0.hdslb.com/bfs/archive/2123fa57ae372853e502ff955d13d28a8bec3b87.png@336w_190h_1c.webp"
					height="300px"></v-img>

				<v-card-title>
					这是标题{{slide}}{{i}}
				</v-card-title>

				<v-card-subtitle>
					小标题
				</v-card-subtitle>

				<!-- <v-card-actions>
					<v-btn color="orange lighten-2" text>
						Explore
					</v-btn>

					<v-spacer></v-spacer>

					<v-btn icon @click="show = !show">
						<v-icon>{{ show ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
					</v-btn>
				</v-card-actions> -->

				<v-expand-transition>
					<div>
						<v-divider></v-divider>
						<v-card-text>
							这是一段解说
						</v-card-text>
					</div>
				</v-expand-transition>
			</v-card>
		</div>
		<div class="rightbox">
		

		</div>






	</div>
</template>

<script>
	export default {
		name: "Home",
		data() {
			return {
				categoryId: 1,
				colors: [
					'indigo',
					'warning',
					'pink darken-2',
					'red lighten-1',
					'deep-purple accent-4',
				],
				slides: [
					'First',
					'Second',
					'Third',
					'Fourth',
					'Fifth',
				]
			}
		},
		created() {
			this.categoryId = this.$route.params.categoryId
		},
		methods: {
			test() {
				this.getRequest('/tag/getTagAll').then(resp => {
					console.log(resp);
				})
			}
		}

	}
</script>

<style>
	.page {
		width: 1200px;
		margin: auto;
		padding: 4px;
		background: #f5f5f5;
		display: flex;
	}

	.carousel {
		/* border-radius: 10px; */
	}

	.leftbox {
		flex: 1;
		padding: 0px 10px;
	}

	.rightbox {
		width: 300px;
		background: #55ffff;
	}

	.card {
		width: 100%;
		margin: 10px 0;
		cursor: pointer;
	}
</style>
